<template>
  <div class="search" v-if="categoryList.length">

    <div class="searchinfo">
      <h3>{{categoryList[this.current-1].cate_name}}</h3>

      <el-dropdown trigger="click" class="down" @command="gotosearch">
        <span class="el-dropdown-link">
          更多类别<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :icon="cate.cate_icon" v-for="(cate,index) in categoryList " :key="index" :command='index+1'>{{cate.cate_name}}</el-dropdown-item>

        </el-dropdown-menu>
      </el-dropdown>
      <a @click="gotohome">返回首页</a>
    </div>
    <div class="infoshow">
      <shopitem v-for="list in recommendshopist" :key="list.goods_id" :list="list"></shopitem>
    </div>
    <div class="foot">
      <ul>
        <li @click="more(active-1)"><a>《</a></li>
        <li v-for="index in catepage[this.current-1]" :key="index" @click="more(index)" :class="{actives: active===index}"><a>{{index}}</a></li>
        <li @click="more(active+1)"> <a>》</a></li>
      </ul>

    </div>
  </div>
</template> 

<script>
import shopitem from '@/components/shopitem.vue'
import { mapGetters, mapState } from 'vuex'

export default {
  data() {
    return {
      active: 1, //当前页数
      current: 1, //当前分类
      pagesize: 3
    }
  },
  created() {
    this.current = Number(this.$route.params.id)
    this.active = Number(this.$route.params.pageno)
    this.$store.dispatch('getuserinfo')
    //分类的数据
    this.$store.dispatch('getcate')
    this.$store.dispatch('goods/reqRecommendShopList', { category: this.current, pageno: this.active, count: this.pagesize })
  },
  components: {
    shopitem
  },
  computed: {
    ...mapGetters(['categoryList']),
    ...mapState('goods', ['recommendshopist']),
    //分页数
    catepage() {
      let arr = []
      this.categoryList.forEach(item => {
        let page = Math.ceil(item.cate_counts / this.pagesize)
        arr.push(page)
      })

      return arr
    }
  },
  methods: {
    gotohome() {
      this.$router.push('/home')
    },
    //更多选择的点击事件
    gotosearch(command) {
      this.$store.dispatch('goods/reqRecommendShopList', { category: command, pageno: 1, count: this.pagesize })
      this.$router.replace('/search/' + command + '/1')
      this.current = command
      this.active = 1
    },
    //点击切换页数
    more(index) {
      if (index && this.catepage[this.current - 1]) {
        this.$store.dispatch('goods/reqRecommendShopList', { category: this.current, pageno: this.active, count: this.pagesize })
        this.active = index
        if (!(this.$route.params.id == this.current && this.$route.params.pageno == this.active)) {
          this.$router.replace('/search/' + this.current + '/' + this.active)
        } else {
          return
        }
      }
    }
  }
}
</script>

<style scoped lang='less'>
.search {
  width: 100%;
  margin: 30px 20%;
  .searchinfo {
    height: 50px;
    line-height: 50px;
    display: flex;
    h3 {
      display: block;
      border: 1px solid #f56c6c;
      background: #f56c6c;
      height: 50px;
      border-radius: 12px;
      font-size: 24px;
      font-weight: 800;
      color: #f7f7f7;
    }
    .down {
      margin-left: 30px;
    }
    a {
      margin-left: 20px;
      cursor: pointer;
    }
  }
  .infoshow {
    display: flex;
    margin-left: 10%;
  }
  .foot {
    margin-top: 20px;
    width: 100%;
    margin-left: 21%;
    ul {
      display: flex;

      li {
        background: #f7f7f7;
        border: 1px solid gray;
        height: 20px;
        width: 40px;
        margin-right: 10px;
        text-align: center;
        line-height: 20px;
        a {
          cursor: pointer;
        }
        .actives {
          background: #f56c6c;
          border: 1px solid #f56c6c;
          color: #f7f7f7;
        }
      }
    }
  }
}
</style>